<template>
  <div class="map_address">
    <div class="map_address_search">
      <span style="margin-right:10px">
        区县:
      </span>
      <span>
        <el-select v-model="form.area" clearable placeholder="请选择区县">
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </span>
      <span style="margin-right:10px;margin-left:10px">
        街道:
      </span>
      <span>
        <el-select v-model="form.street" clearable placeholder="请选择街道">
          <el-option
            v-for="item in streetOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </span>
      <span style="margin-left:10px">
        <el-button type="primary" @click="search">搜 索</el-button>
        <el-button type="danger" @click="reset">重 置</el-button>
      </span>

    </div>
    <div class="title">
      <div
        v-for="(item,index) in nameList"
        :key="index"
        :style="{
          borderRight:index===3?'':'1px solid #b9b9b9'
        }"
        class="titleName"
      >
        <div v-if="index===0" style="color:#1cf62c" class="nameTabs"> {{ item.cQyGradeName.substring(0,2) }}</div>
        <div v-if="index===1" style="color:#1497d8" class="nameTabs"> {{ item.cQyGradeName.substring(0,2) }}</div>
        <div v-if="index===2" style="color:#ebcc4e" class="nameTabs"> {{ item.cQyGradeName.substring(0,2) }}</div>
        <div v-if="index===3" style="color:red" class="nameTabs"> {{ item.cQyGradeName.substring(0,2) }}</div>
        <div class="nameNum"> {{ item.iNums }} 家 </div>
      </div>
    </div>
    <!-- <div class="leng">
      <div>
        药店等级信息
      </div>
      <div style="margin-top:5px">
        <span class="commonSpan" style="background-color:red" />
        <span>A级</span>
        <span>(2)</span>
      </div>
      <div style="margin-top:5px">
        <span class="commonSpan" style="background-color:yellow" />
        <span>B级</span>
        <span>(3)</span>
      </div>
      <div style="margin-top:5px">
        <span class="commonSpan" style="background-color:blue" />
        <span>C级</span>
        <span>(1)</span>
      </div>
      <div style="margin-top:5px">
        <span class="commonSpan" style="background-color:orange" />
        <span>D级</span>
        <span>(1)</span>
      </div>
    </div> -->
    <!-- <div class="toolbar">
      当前坐标: {{ lng }}, {{ lat }}
    </div> -->
    <div
      class="address-wrapper"
      :style="{width:'100%',height:'90%'}"
    >
      <!--  :drag-enable="false" -->
      <el-amap
        vid="amap"
        class="amap-demo"
        :amap-manager="amapManager"
        :plugin="plugin"
        :center="center"
        :zoom="zoom"
      >
        <!-- 点标记在地图上显示的位置，默认为地图中心点， -->
        <el-amap-marker v-for="(marker,index) in markers" :key="index" :center="center" :icon="marker.icon" :events="marker.events" :position="marker.position" />
        <el-amap-info-window
          v-if="window"
          :position="window.position"
          :visible="window.visible"
          :content="window.content"
          :offset="window.offset"
          :close-when-click-map="true"
          :is-custom="true"
        >
          <div id="info-window">
            <div style="padding: 5px;color:black">
              <div style="padding:2px">药店名称:{{ window.name }}</div>
            </div>
            <div class="detail" @click="checkDetail">查看详情</div>
          </div>
        </el-amap-info-window>
      </el-amap>
    </div>
  </div>
</template>

<script>
import { getQueryBodyByProduce } from '@/api/dynamicInterface/index.js';
// 引入获取实例
import { AMapManager } from 'vue-amap';
const amapManager = new AMapManager();
// let Geocoder; // 先声明变量
export default {
  data() {
    const self = this;
    return {
      form: {
        area: '',
        street: ''
      },
      areaOptions: [
        {
          value: '120.5819,29.98894',
          label: '绍兴市'
        }, {
          value: '120.5819,29.98895',
          label: '越城区'
        },
        {
          value: '120.492736,30.08763',
          label: '柯桥区'
        },
        {
          value: '120.86858,30.03227',
          label: '上虞区'
        }, {
          value: '120.23629,29.71358',
          label: '诸暨市'
        },
        {
          value: '120.90435,29.49991',
          label: '新昌县'
        },
        {
          value: '120.82174,29.58854',
          label: '嵊州市'
        }
      ],
      streetOptions: [
        {
          value: '120.681531,30.012565',
          label: '皋埠街道'
        },
        {
          value: '120.612057,30.002154',
          label: '迪荡街道'
        }
      ],
      nameList: [],
      windows: [],
      window: '',
      center: ['120.58154', '30.03553'],
      loaded: false,
      zoom: 13,
      input: '',
      lng: 0,
      lat: 0,
      amapManager,
      data: [
        {
          position: '120.583943, 30.05091',
          url: require('@/assets/images/mapper/position.png'),
          name: '绍兴市震元堂'
        }
      ],
      markers: [], // 标记
      plugin: [
        {
          enableHighAccuracy: true, // 是否使用高精度定位，默认true
          timeout: 100, // 超过10秒后停止定位，默认：无穷大
          convert: true, // 自动偏移后的坐标为高德坐标，默认：true
          showButton: true, // 显示定位按钮，默认：true
          buttonPosition: 'RB', // 定位按钮停靠位置，默认'LB'，左下角
          showMarker: false, // 定位成功后在定位到的位置显示标记，默认：true
          showCircle: false, // 定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: false, // 定位成功后将定位到的位置作为地图中心点，默认true
          zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          extensions: 'all',
          pName: 'Geolocation' // AMap-Geolocation 定位插件
          // events: {
          //   init(o) {
          //     // o 是高德地图定位插件实例
          //     o.getCurrentPosition((status, result) => {
          //       if (result && result.position) {
          //         // self.lng = '120.58154'; // 设置经度
          //         // self.lat = '30.03553'; // 设置纬度
          //         // self.center = ['120.58154', '30.03553']; // 设置坐标
          //         // self.markers.push(self.center); // 获取当前定位并存入标记中显示标记点
          //         self.loaded = true; // load
          //         self.zoom = 11;
          //         self.$nextTick(); // 页面渲染好后
          //       }
          //     });
          //   }
          // }
        },
        // Geocoder编码：根据地理名称来获得地点的经纬度
        {
          pName: 'Geocoder',
          events: {
            init: (o) => {
              // Geocoder = o; // o 则是AMap.Geocoder的实例 对外部的Geocoder变量进行赋值，在任何地方就都可以使用
              // data里的events中使用了Geocoder
              o.getAddress(self.center, function(status, result) { // 根据坐标获取位置
                if (status === 'complete' && result.info === 'OK') {
                  self.input = result.regeocode.formattedAddress;
                  document.querySelector('.search-box-wrapper input').value = self.input;
                }
              });
            }
          }
        }]
    };
  },
  mounted() {
    this.point();
    this.getData();
  },
  methods: {
    search() {
      if (this.form.area !== '' && this.form.street === '') {
        this.center = [];
        this.center = [this.form.area.split(',')[0], this.form.area.split(',')[1]];
        this.zoom = 13;
      }
      if (this.form.area !== '' && this.form.street !== '') {
        this.center = [];
        this.center = [this.form.street.split(',')[0], this.form.street.split(',')[1]];
        this.zoom = 16;
      }

      // if (this.form.area === '') {
      //   this.center = ['120.58154', '30.03553'];
      //   this.zoom = 12;
      // } else {
      //   this.center = [];
      //   this.center = [this.form.area.split(',')[0], this.form.area.split(',')[1]];
      // }
      // this.zoom = 13;
    },
    reset() {
      this.center = ['120.58154', '30.03553'];
      this.zoom = 12;
      this.form.area = '';
      this.form.street = '';
    },

    point() {
      const markers = [];
      const windows = [];
      const that = this;
      for (let i = 0; i < 15; i++) {
        this.data.push(
          {
            position: `${120.58154 + 0.1 * Math.random(0, 10)}, ${30.03553 + 0.1 * Math.random(0, 10)}`,
            url: require('@/assets/images/mapper/position.png'),
            name: `绍兴市震元堂${i}`
          }
        );
      }
      this.data.forEach((item, index) => {
        markers.push({
          position: item.position.split(','),
          icon: item.url, // 不设置默认蓝色水滴
          events: {
            mouseover() {
              // 方法：鼠标移动到点标记上，显示相应窗体
              that.windows.forEach(window => {
                window.visible = false; // 关闭窗体
              });
              that.window = that.windows[index];
              that.$nextTick(() => {
                that.window.visible = true;
              });
            },
            //  方法：鼠标移除到点标记上,关闭窗体
            mouseout() {
              that.windows.forEach(window => {
                window.visible = false; // 关闭窗体
              });
            }
          }
        });
        windows.push({
          position: item.position.split(','),
          isCustom: true,
          offset: [-10, -10], // 窗体偏移
          showShadow: false,
          visible: false, // 初始是否显示
          name: item.name

        });
      });
      //  加点
      this.markers = markers;
      // 加弹窗
      this.windows = windows;
    },
    getData() {
      getQueryBodyByProduce({
        cprogramname: '',
        filterList: [],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 713
      }).then(res => {
        if (res.success) {
          this.nameList = res.data;
        } else {
          this.nameList = [];
        }
      });
    },
    checkDetail() {
      alert('点击了查看详情');
    }
  }

};

</script>

<style scoped lang="scss">
  .map_address_search{
    padding:10px
  }

.map_address{
  margin: 0 auto;
}
.amap-demo {
    height: calc(80vh);
    width: 100%;
    }
    .amap-page-container {
      position: relative;
    }
    #info-window{
      width: 211px;
      height: 60px;
      margin-left: 30px;
      background:rgba(255,255,255,0.9);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      .detail{
        width: 100%;
        height: 24px;
        color: #fff;
        background-color: #1a73e8;
        position: absolute;
        bottom: 0;
        font-size: 12px;
        line-height: 24px;
        text-align: center;
        cursor: pointer;
      }
    }
    .title{
        position: absolute;
        top: 65px;
        left: 15%;
        z-index: 999;
        background: #e9effbd1;
        width: 70%;
        height: 90px;
        display:flex;
        padding:10px 5px;
        .titleName{
          flex:1;
          text-align: center;
        }
    }
    .nameTabs{
      font-size: 30px;
      font-weight: bolder;
    }
    .nameNum{
      font-weight: bolder
    }

    .leng{
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 999;
    width: 100px;
    height: 140px;
    opacity: 0.55;
    color: #fff;
    background-color: black;
    text-align: center;
    padding:10px;
    font-size:12px;
   }
    .commonSpan{
     width:12px;
     height:12px;
     display:inline-block;
   }

</style>

